Hay una diferencia entre añadir una imagen de fondo y añadir una textura. Normalmente para las texturas utilizamos la propiedad repeat para que la imagen se repita y ocupe todo el fondo.
En una plantilla de Blogger la imagen de fondo la añadiríamos de la siguiente forma.body {
background: url('url-imagen-fondo');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Cuando hacemos eso conseguimos que la imagen se repita a lo largo y ancho del blog.
Veamos un ejemplo, añadimos la siguiente imagen que mide 250px × 229px
background: url('url-de-la-imagen');
Por defecto la imagen se repite, y nos proporciona el mismo efecto que si añadiéramos la propiedad repeat.
background: url('url-de-la-imagen')repeat;
La propiedad background-repeat determina como se repite una imagen de fondo.Si utilizamos no-repeat nuestra imagen no se repetirá y por defecto aparecería en el margen superior izquierdo.
background: url('url-de-la-imagen') no-repeat;
Hay otros valores que podemos añadir para decidir de qué forma repetir la imagen.
Si con repeat la imagen se repite horizontal y verticalmente con repeat-x conseguimos que se repita en horizontal.
background: url('url-de-la-imagen')repeat-x;
Por el contrario se repetirá en vertical si utilizamos repeat-y
background: url('url-de-la-imagen') repeat-y;
Como decía antes no se añade igual una textura que una imagen, antes de añadir una imagen de fondo deberíamos saber que la imagen no se posiciona en el centro sino que somos nosotros los que debemos añadir la posición de la imagen. Para posicionar una imagen utilizamos la propiedad background-position.
Se utilizan los valores top (arriba) left (izquierda) right (derecha) bottom (abajo) y center (centrado)
Posiciones horizontales: (left, center, right)
Posiciones horizontales verticales (top, center, bottom)
Partiendo de esa base aquí tenemos unos ejemplos.
¿Todavía nada en claro? quizás con este ejemplo veamos mejor como posicionar una imagen tipo fotografía.
Si nuestra imagen es grande puede que no tengamos problema, pero si por el contrario es menor que el espacio de nuestro blog se vería más o menos así:
background: url('url de la imagen') no-repeat center;
Hay una solución y es aumentar la imagen de tamaño, pero con seguridad que la imagen perdería calidad, podemos probar si así lo deseamos o.. recurrir a otra solución. Añadir color a ese espacio que no es ocupado por la imagen.
background:#000 url('url de la imagen') no-repeat center;
La solución es sencilla veremos la imagen centrada, y ese espacio que no ocupa será ocupado por un color.
Tu blog esta excelente!! Felicidades!!
Muy buen tutorial Gem@, la verdad es que el fondo es una de las cosas más importantes
Saludos
Aprovechando que he entrado por el lado de Windows del portátil, aprovecho para saludarte y decirte que me he abierto una cuenta en Twitter, porque, como ya te dije hace un tiempo, me resulta imposible visitar directamente tu blog usando Linux, pero te sigo por correo y, si no te molesta, los comentarios te los hago vía Twitter. ¿Te parece bien?
En cuanto al tema en cuestión, de CSS sé muy poca cosa, no sabía, por ejemplo, que es posible combinar un fondo con una imagen, y tampoco conocía en profundidad los atributos disponibles para posicionar la imagen, así que todo ésto me va a servir de mucha ayuda, en caso de rediseñar alguno de mis blogs.
¡Un saludo, Gem@!
De cualquier forma me alegra verte
Malinaaaaaaaaaaa
fíjate la malamujé viene aquí a cotillear de mi a escondidas.
Gem@ no hay derecho
Y mira que lo sospeché... "esta es pa ahorrarse el trabajo" y na, ¡qué piqué!
@Malina, ¡bixo tu!
Pero que belleza. Hay que ponerla en práctica, si no de seguro tendré un castigo.
¡Un gran abrazo, Gem@!.
Nos gustaría intercambiar enlaces con ustedes, contáctennos: contacto@creactivityfocus.com.
Buenas! Gracias por esta explicación tan sencilla y provechosa! Cada vez que visito tu blog me dan ganas de tunear el mio... (y eso es bastantes veces
).
).
Por cierto, he visto por allí arriba que alguien se queja de que no puede ver tu blog desde Linux... Creo que a mi me pasa lo mismo (y digo creo, porque tampoco me he fijado tanto cuando es que no puedo abrirlo...
Bueno, te quería hacer una petición (¿tienes algún post donde hacer peticiones? Si está, no lo he visto). El caso es que me gustaría hacer que cuando la gente busque por etiquetas en mi blog, no saliera el cartel ese de "Se muestran todos los posts relacionados con la etiqueta tal". Si no es mucha molestia, podrías explicar como se hace? (si es posible, claro está).
Sobre una entrada de peticiones pues no, no tengo nada de eso pero me puedes preguntar lo que quieras en cualquier entrada como ahora.
Lo que buscas puedes verlo en el siguiente enlace
Hola Gema estoy intentando cambiar el blog de álvaro (mi hijo) y quiero ponerlo con transparencias me parecen preciosas, pero me declaro incapaz...ya que siguiendo tus pasos no logro que el fondo se quede quieto y la transparencia sea la que baje y suba...espero que entiendas lo que tan mal te explico
)
Si puedes echame un cable vale?
Gracias anticipadas.
Otra cosa.. ¿qué color le vas a dar a la transparencia? ya tengo algo en mente que te facilitará la tarea pero depende del color
Hola Gema de nuevo, si tengo un blog de pruebas en el que hago de todo sin demasiado éxito de momento...
)
La idea es un fondo oscuro o acerado algo parecido a lo que pusiste tu en la entrada de las transparencias y un cuerpo más claro para que se lea mejor, pero con movimiento..
De todas formas sabes que me dejo aconsejar por ti encantada...
Un abrazo
hola te quiero felicitar por este buen blog, ya q ayuda a todos los q no saben como crear un blog y me incluyo yo, eh estado buscando por todos lados y no encuentro la solucion para mi pregunta, espero me puedas ayudar.
Mi duda es como puedo hacer para q en la barra de direcciones de cualquier navegador solo aparesca mi URL asi:
http://miblog.com y no http://mibleg.com/algo.html cada ves k la gente va entrando a enlaces diferentes.
osea q se esconda las demas URL de enlaces y solo se mantena mi direccion fija.
Espero alguna respuesta x favorr gracias!!!
(No te olvides de mandar la imagen de fondo si no la tuvieras añadida)
Hasta donde yo sé en Blogger no es posible hacer eso que dices
Hola Gema, yo again, pero ahora por este otro lado, vi este fondo y me has dado una gran idea, me darias el link de la imagen a ver si ahora q tengo un poco de tiempo puedo personalizar comentarios" con esta hermosa img.
Gracias
Hola, pues esta es la primera vez que escribo en este blog pues ya tiene varias veces que lo visito pero no me agradaba el diseño anterior XD
pero quedo mejor, pues gracias por este tuto de como poner fondo, yo tuve que editar todo lo de mi plantilla, mejor dicho borre cosas, pero funciona saludos desde Quintana Roo Mexico
Themasteralex
www.megadesc.blogspot.com
me refiero a que no quede como tu fondo de madera q por cierto es muy lindo...quisiera que quede como en el lugar del fondo blanco que tienes
Ahora creo q me explique mejor
Cariños
Sorry no me quedo completo el post, esta es la primera parte
Gracias Gema, deseo que la imagen quede como pagina principal para todos los efectos pero me preguntaba si sera factible que solo algunas entradas puedan tener un fondo distinto (poner de fondo la imagen que tanto me gusto de tu ejemplo) al de la pagina principal del blog,
De hecho la use en la cabecera del blog y quedo super bien...mirala cuando puedas
El diseño del blog es tarea fácil cuando lo hacemos nosotros mismos, lo complicado es que guste a todo el mundo
(Voy a ver los otros comentarios tuyos que ayer no me dio tiempo a contestar)
Gracias por este, que bueno q te gusto, ahora que ya tienes ambas vistas, cual crees tu es la mejor apariencia para mi blog, la anterior o la actual (con sinceridad ok, recuerda q es la imagen de entrada para mi negocio).
Cariños
Hola gema como vas
yo aca haciendo los cambios y mejoras: tengo una duda, no encontre el .Post-body{ que mencionas, aca te detallo lo que aparece en mi plantilla:
.date-header
.post
.post-title
.post-title a; .post-title: a visited; .post-title strong{ text decoration:none;
.post div
.post footer
.post footer .span
.post img
.post blockquote
.post blockquote p
y seria no hay mas, no quize tocar nada...
La imagen me gusta, sin embargo y siempre teniendo en cuenta que es mi opinión pero debe ser tu decisión porque es tu blog... yo pondría una imagen distinta, una imagen que destaque del contenido del blog, algo que llame la atención pero sin quitarle protagonismo a las entradas que es la pieza importante.
Algo así como un degradado donde el color predominante fuera el color que vas a utilizar para las fuentes del blog.
Y ya que me pides opinión .. utilizaría el mismo color para todas las fuentes, es decir la misma tonalidad.
Sobre ese código que no encuentras prueba con .post div en todas las plantillas no viene definido igual
Gracias por tus ideas, pense q para fondo del blog seria muy de barby por eso mi idea central era dejarlo solo para algunas entradas (novias/mis quince/mujeres o similares y ahora q me das el codigo hare esos cambios) en cuanto a la imagen, he visto tantas, pense hasta en una foto en transparencias pero no se como hacerlo vi tus notas pero no me resultan, el degrade me gustaria bastante si tienes algo en tu baul de herramientas (jajaja) dame el link para intrusear y seguir buscando. las fuentes tienes mucha razon y hoy estuve haciendo coincidir todos los titulos del mismo color y fuente (en las entradas) trate de hacerlo con el resto en la plantilla (siderbar/post/cabecera/y el titulo donde esta el reloj, queria unificar todo con la fuente vivaldi pero no me resulto) a ver si lo estoy haciendo bien
font-style='vivaldi'>
cariños y gracias mil por la ayuda
Muy buenas Gema, el otro dia puse una imagen de fondo de mi blog, pero no guarde el color original en negro del mismo, y ahora quisiera volver al color negro original, pero sin tener que colgar una miagen nega, ¿como lo hago?.
Gracias anticipadas y enhorabuena por tu blog, recuerdos de chico, un colega enamorado de este blog.
Sobre el tipo de fuente vivaldi te cuento...
Para que veas ese tipo de fuente debes tenerlo en tu PC, es decir descargarlo de "algún" sitio y guardarlo en la carpeta de fuentes de tu sistema.
Otro detalle a tener en cuenta es que para visualizar las fuentes deben estar como te decía en nuestro PC esto también va para tus visitas porque de no tenerla no la verían.
Normalmente se añaden tres o cuatro tipos de fuentes para en caso de no tener la primera visualizar la segundo, o la tercera y así sucesivamente.
El sitio donde debemos añadirla es en body. (en los estilos del cuerpo del blog)te lo marco en negrita.
body {
background: url("url imagen de fondo"); no-repeat;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: #1B703A;
font-size/* */:/**/small;
font-size: /**/small;
}
Abrazos
Busca lo siguiente:
body {
background: url(http://img5.imageshack.us/img5/2416/inkstaintexture20.png)no-repeat bottom right fixed;
y sustitúyelo por
body {
background:#000;
Suerte
Hola Gema, gracias por tus comentarios,
hice todo y agrege la fuente a la plantilla pero me cambio todo el cuerpo, titulos y fecha de los post, tb todo en la columna de la siderbar, trate de agregar de a uno el cod. en los diversos items donde aparecen cod. fuentes y no encontre la solucion (se puede cambiar la fuente de los titulos de las entradas y la sider bar a vivaldi y mantener el cod. fuente actual del cuerpo)
Cariños
Saludos.
Primero darte la enhorabuena por el Blog.
Veras tengo un problema , el fondo de mi blog es una imagen fija subida a un servidor , el problema es que el tamaño de la imagen de fondo varia de un ordenador a otro ¿Habría alguna forma de que la imagen de fondo se auto-adaptase a cualquier proporción de pantalla?
Gracias de antemano.
Intenta dar un ancho de 100% a outer-wrapper y vemos si se soluciona.
Si deseas cambiar la letra del título de los post y sidebar lo puedes hacer en post-title y sidebar añadiendo:
font-family:Verdana,Tahoma,sans-serif;
Sustituyendo lo que está marcado en negrita por tu fuente
Hola Gema.
Perdona por no contestarte antes, es mi blog de ilustración el que quiero modificar, pero cuando pongo el código que me das , lo que sucede es que mis posts y barras se ponen a los lados de la pantalla , pero la imagen de fondo se sigue viendo cortada.
No sé si lo que pido es imposible.
Gracias de nuevo.
Hola Gema. siempre estoy pendiente de tus escritos y no encontré nada que me ayude a resolver esta inquietud ¿ como hago para que una imagen que tengo en el fondo del blog (pagina principal), sea diferente en la siguiente pagina. pero que no sea en forma aleatoria , sino la imagen que uno quiere que salga.gracias querida
http://gemablog-.blogspot.com/2008/09/random-de-imgenes-como-fondo-del-blog.html
Por favor GEMA me puedes explicar un poquito mas , fui a la entrada en mención y no encuentro como tener una imagen de fondo en la pagina principal y otra diferente en la siguiente pagina, pero que no sea en forma de random , sino las imágenes que yo quiero estén ahí y no cambien nunca...explicarme un poquito mas.
no entiendo muy bien
hay que ponerle:
background: url (url de la imagen)repeat
pero a eso se le coloca con parentesis o que???
Se añade tal y como está respetando las comillas, únicamente sustituyes url-de-la-imagen por la url de tu imagen.
background: url('url-de-la-imagen')repeat;
Intento conseguir la url de la imagen con imageshack una web pero nada cual de todos los enlaces es y que debo quitar? gracias
Hola Gem@ en donde puedo aumentar el tamaño de la imagen de fondo, sin que se repita la misma. Te lo agradezco de antemano!!!.
Gema tengo un drama, seguí tus indicaciones pero por IE no se ve la imagen por Chrome y mozilla no hay dramas. Que puedo hacer.
Gracias
http://sites.google.com/site/fusionpecosa/Home/muchasxxx.JPG
Gema, no me sale, mira esto es lo q tengo y aún así no aparece por IE
body {
background: url('http://sites.google.com/site/fusionpecosa/Home/muchasxxx.JPG')no-repeat;
Gracias Gem@!!! la verdad he intentado varias veces cambiado la imagen en distintos editores, y la imagen se sigue viendo igual (o si acaso, una minima diferencia en el tamaño) en la plantilla. Porque me pasa esto?, de cuanto es al maximo de pixeles que acepta la plantilla en una imgen de fondo, sin que esta modifique imagen y la conserve con su tamaño original al insertarla?
background:#000000 url(url de la imagen Picasa2.jpg);
background-repeat: repeat;repeat-y;
y añadir:
background:#000000 url('url-de-la-imagen')repeat;
Gema, la cambié por q no se veía por IE y por q la verdad estaba bien desabrida :p volví a la q tenía y no me hice mas rollos.
De todas formas gracias.
hola primera vexs q escribo aki saludos !!!
oies pues molestandote con una duda q me surgio si puedes revisar mi blog de pozodj como puedo hacerle para quitar el margen de la imagen principal o la q tengo en lugar del titulo para q me entiendas ia que quisiera que fuera casi del tamaño del ancho del blog i tmb el margen de las entras que quisiera estubieran mas a la izquierda gracias de antemano por tu ayuda !!!
Hola!!
Yo tengo un problema y creo que me lo podrás solucionar, porque es exactamente lo que tú tienes en tu blog. Yo tenía precisamente un fondo de una madera oscura tipo parket(casi clónica a la tuya-que conste q no me he copiado,ehh-)y lo sé poner de fondo, sí, pero se me pone en todo. Quiero reservar el blanco (como tú) para la parte central, ya que si no tiene buena lectura...
Me podrías ayudar?? Te lo agradecería mil
PD: En la textura de mi madera se ve como se corta la imagen y empieza de nuevo.... cómo consigues tú que no t pase?
Para que se vea la parte central de color blanco puedes añadir el color de fondo en outer-wrapper algo así:
#outer-wrapper {
background:#ffffff;
La tengo añadida como tu con repeat para que se repita puede que el color blanco no muestre ese corte de la imagen o también que el dibujo de la madera lo disimule, si quieres probar con esta que yo tengo puedes llevarla tranquilamente
hola gem@!! tampoco consigo poner un fondo en http://paraninosconcabeza.blogspot.com... ¿qué piensas que puede ser?
hola gem2! vwngo otra vez de visita... se me ha olvidado cómo dejar en blanco la parte central del blog cuando añades una imagen e fondo... aiss
#outer-wrapper {
background:#fff;
.............
.............
.............
}
hola gema. He visto en algun blog que la imagen de fondo permanece estatica en toda la longitud del post. ¿Sabes como puedo hacerlo?
http://gemablog-.blogspot.com/2007/04/imagen-de-fondo-esttica.html
eres una genia!!!
Muchas gracias por esta recopilación de repeats
¡Era justo lo que necesitaba!
Estoy diseñando mi primera plantilla, me refiero a diseñarla por completo. Puede que en el futuro necesite tu ayuda, de momento, podría decirse que acabo de partir y aún no estoy en alta mar...
Un saludo, Gem@!
Hola, Gema; he colocado una imagen que me ocupa la cabecera y el crosscol y no estoy segura de si queda bien... te importa echar un vistazo y darme tu opinión? Reduje la foto desde photobucket pero no me va bien, y ésta es la opción que mejor quedaba, pero no sé si agobia un poco al visitante. Gracias! http://tinkertrips.blogspot.com/
Ni caso a lo de antes, ya lo he solucionado (no había cerrado photobucket y no me guardaba los cambios). Gracias!!!
hola gem@: para poner una textura de fondo al blog, tengo un script -bien largo- que ya viene con la textura (de una de las páginas de wallpapers) ¿cómo lo coloco o dónde?
Gemma, eres DIos!
ahhhh sale blancoel fondo cuando quiero modificarlo!!!
este es mi blog, esta muy sencillo, aun estoy en eso de aprender...
http://miblogdepoesia.blogspot.com
se esta actualizando Sensei, esta pc es tercermundista... jaja
Querida Gemma, estoy a años luz de entenderle bien a esto, tendre que desempolvar mis clases de programacion y recordar... pq no jala el fondo!!! estoy entre tus seguidores, y creeme, me encanta tu sitio!!!
background: url(http://www.fondos10.net/wp-content/uploads/2008/10/mariposa-1280-x-1024-300x240.jpg);
Si quieres que quede centrada y arriba como creo que estás intentando:
background: url('http://www.fondos10.net/wp-content/uploads/2008/10/mariposa-1280-x-1024-300x240.jpg')no-repeat center top;
Hola Gema, tengo un inconveniente con la imagen de fondo en el Explorer, no se puede ver mientras que con firefox y otros si se ve bien. En el explorer hay varias cosas que difieren, los bordes de las entradas y demás detalles como el fondo nuevo. El blog es guidopalmadessa.blogspot.com
Muchas gracias!!! tu blog es de gran ayuda para todos!!
background-image:url("http://3.bp.blogspot.com/_9OVrsNqBOV8/S96Nrdq10PI/AAAAAAAAAhw/
background-position:right top;
background-repeat:repeat;
El de los bordes tiene añadido la propiedad border-radius para que se muestre en distintos navegadores, pero dicha propiedad no la reconoce Explorer, para que se vieran esquinas redondeadas en Explores sería necesario utilizar imágenes o un script
Hola!
Como pongo el URL de la imagen? No tengo idea!
Quiero ponerle una imagen de fondo al blog pero no se como.
Saludos
body {
background: url('url-imagen-fondo');
.......
.......
.......
Muchas Gracias Gema!
Te quiero preguntar otra cosa, en el html de mi blog puedo poner una tipografía que no venga por defaul en la maquina?
Saludos
http://vagabundia.blogspot.com/2010/05/google-font-api-en-blogger.html
¿Podríamos poner una imagen de fondo diferente solo en la columna central donde aparecerán los post?. Hablo de un bloggger de tres columnas siendo la central la de las entradas.
Quiero hacer esto porque mi blog se ve extraño en resoluciones por debajo de 600x800 pixeles y poniendo la imagen de fondo en la columna central ya se vería mejor.
Llevo todo el día buscando como hacerlo y no doy con la tecla.
Algunas contienen una única imagen de fondo, tendría que ver tu blog
Es cierto, perdona de nuevo. Este es el link: http://diariodeuntortuguero.blogspot.com/
Ya verás que estoy usando bastantes trucos tuyos aunque no todos los echo a andar.
Muchas gracias por tu ayuda, y enhorabuena por el blog.
.post-outer:first-child {
border-top: medium none;
padding-top: 0;
}
Para añadir una imagen lo podemos hacer añadiendo en esos estilos background: url('url-imagen-fondo');
.post-outer:first-child {
border-top: medium none;
padding-top: 0;
background: url('url-imagen-fondo');
}
Si la imagenes una textura no tendrás problemas pero si es una imagen tipo fotografía tendrás que adaptarla según tamaño como se indica en la entrada.
Muchas gracias Gema, ya casi está, pero solo se me pone el fondo en el mismo post, a mi me gustaría si fuese posible en toda la columna para que quedase como antes (sin el salto del fondo entre post y post, sino con fondo desde arriba hasta abajo). En toda la columna.
Al hacer el fondo sobre toda la columna seguramente no tenga que quedar dentro del marco del post sino por fuera, eso sería el colofón.
Lo que falta, creo, es saber que parte del código es la de toda esa columna. A ver si me puedes echar una mano.
Mil gracias Gema por tu ayuda.
Un saludo.
Entonces este es el lugar:
.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {
padding: 0 5px;
background: url('url-imagen-fondo');
}
Hola Gema!!
graciaas
Bueno... me ha interesado mucho esa entrada, pero no he compreendido donde se mete el codigo en que parte del codigo?mi plantilla es la sencilla, y me gustaria aplicar el fondo en todo el blog
Hola Gem@. Hace tiempo que sigo tu blog pero como hasta ahora no me he puesto en serio a tratar de personalizar un poquito más el mío, no había comentado nunca. Ahora me ha surgido una duda y llevo días buscando la solución pero no la localizo, así que me he decidido a preguntarte directamente.
Quiero poner un fondo en mi blog, pero que la parte central quede como la tienes tú, en blanco. No solo cada una de las entradas, sino toda la parte central. Cambié mi plantilla a mínima para ir siguiendo algunos tutoriales y expicaciones que indicas, y ahora no logro hacer esta modificación. ¿Podrías darme alguna pista? Muchas gracias!
@Gem@
Hola Gem@, perdona el retraso pero no he visto tu comentario hasta hoy (vacaciones!). Es un blog que tengo en privado, lo uso para hacer pruebas.
Puedes probar con el color oscuro en el body y el blanco en outer-wrapper.
Gem@ y si quiero poner dos fondos diferentes por ejemplo, quiero que uno vaya en la X y el otro quiero que vaya repetido en X y Y?, como se podria hacer eso?. Gracias.
http://vagabundia.blogspot.com/2011/11/background-los-fondos-y-lo-standard.html
eu no metira vos podes ver mi blog y podes cvomentar y decirle a alguien y tambien darme consejos osea todo lo que pido es una ayudita si podes muchas gracias mi blog es:
miespaciomilugar.blogspot.com
Nota: solo los miembros de este blog pueden publicar comentarios.